<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/public.css" type="text/css">
    <link rel="stylesheet" href="css/index.css">
    <title>首页</title>
</head>
<body>
    <div class="header">
        <div class="header_all">
            <div class="header_left">
                <img src="image/index-1.png">
                <div class="header_left_h">
                    <h3>扫码下载寺库APP</h3>
                    <p>给你全世界的美好</p>
                </div>      
            </div>
            <div class="header_center"><a href="#"><img src="image/index-2.jpg" alt=""></a></div>
            <div class="header_right">
                <div class="header_right_top">
                    <p> <a href="login.html">请登录</a> <span>|</span> <a href="register.html">免费注册</a></p>
                    <p class="serve"><a href="#">客户服务<i></i></a></p>
                    <p id="serve_a">
                        <a href="#">在线客服</a>
                        <a href="#">养护中心</a>
                        <a href="#">帮助中心</a>
                        <a href="#">贵宾专线 : 400-78-56789</a>
                    </p>
                    <p class="meiti"><a href="#">媒体聚焦</a></p>
                </div>
                <div class="header_right_bottom">
                    <img src="image/index-3.jpg">
                    <a href="shoppingcart.html">购物车</a>
                    <span>(0)</span>
                </div>
            </div>
        </div>
    </div>
    <div class="title">
        <div class="title_all">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">包袋</a></li>
                <li><a href="#">腕表</a></li>
                <li><a href="#">珠宝首饰</a></li>
                <li><a href="#">服装鞋靴</a></li>
                <li><a href="#">配饰</a></li>
                <li><a href="#">体育活动</a></li>
                <li><a href="#">家居生活</a></li>
                <li><a href="#">生活方式</a></li>
                <li><a href="#">母婴美妆</a></li>
                <li><a href="#">豪车频道</a></li>
            </ul>
            <div class="ipt"> <input type="text" value="" placeholder="Roger Vivier"></div>
        </div>
    </div>
    <div id="scrollBanner">
            <ul id="scrollList">
                <li><a href="productlist.html"><img src="image/index-5.jpg"></a></li>
                <li><a href="productlist.html"><img src="image/index-6.jpg"></a></li>
                <li><a href="#"><img src="image/index-7.jpg"></a></li>
                <li><a href="#"><img src="image/index-8.jpg"></a></li> 
                <li><a href="#"><img src="image/index-9.jpg"></a></li> 
                <li><a href="#"><img src="image/index-10.jpg"></a></li> 
                <li><a href="#"><img src="image/index-11.jpg"></a></li>
                <li><a href="#"><img src="image/index-12.jpg"></a></li>
            </ul>
            <div id="btns">
                <div>&lt;</div>
                <div>&gt;</div>
            </div>
            <ul id="nums">
                <li class="hover"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
    </div>
    <div class="center">
        <div class="center_all">
            <div class="center_a">
                <div class="center_a_left">
                    <a href="productlist.html"><img src="image/index-center1.jpg"></a>
                    <span></span>
                    <p><a href="productlist.html">VERSACE</a></p>
                </div>
                <div class="center_a_right">
                    <a href="productlist.html"><img src="image/index-center2.jpg"></a>
                    <span></span>
                    <p><a href="productlist.html">VERSACE</a></p>
                </div>       
            </div>

            <div class="center_a">
                <div class="center_a_left">
                    <a href="productlist.html"><img src="image/index-center3.jpg"></a>
                    <span></span>
                    <p><a href="/productlist.html">VERSACE</a></p>
                </div>
                <div class="center_a_right">
                    <a href="productlist.html"><img src="image/index-center4.jpg"></a>
                    <span></span>
                    <p><a href="productlist.html">VERSACE</a></p>
                </div>       
            </div>

            <div class="center_a">
                <div class="center_a_left">
                    <a href="productlist.html"><img src="image/index-center5.jpg"></a>
                    <span></span>
                    <p><a href="/productlist.html">VERSACE</a></p>
                </div>
                <div class="center_a_right">
                    <a href="productlist.html"><img src="image/index-center6.jpg"></a>
                    <span></span>
                    <p><a href="productlist.html">VERSACE</a></p>
                </div>       
            </div>

            <div class="center_a">
                <div class="center_a_left">
                    <a href="productlist.html"><img src="image/index-center7.jpg"></a>
                    <span></span>
                    <p><a href="productlist.html">VERSACE</a></p>
                </div>
                <div class="center_a_right">
                    <a href="productlist.html"><img src="image/index-center8.jpg"></a>
                    <span></span>
                    <p><a href="productlist.html">VERSACE</a></p>
                </div>       
            </div>

        </div>
    </div>
    <div class="middle">
        <div class="middle_all">
            <div class="middle_all_top"><p>猜您喜欢</p></div>
            <div id="scrollBanners">
                    <ul id="scrollLists">
                        <li><p><a href="#"><img src="image/middle_03.jpg"><span>【11.11可用券】CELINE...<br>￥15182</span></a></p>
                            <p><a href="#"><img src="image/middle_05.jpg"><span>Apple iphone XR(A210...<br>￥6499</span></a></p>
                            <p><a href="#"><img src="image/middle_07.jpg"><span>【包税】CARTIER/卡地...<br>￥10461</span></a></p>
                            <p><a href="#"><img src="image/middle_09.jpg"><span>Coach蔻驰MINI CHARL...<br>￥999</span></a></p>
                        </li>
                        <li><p><a href="#"><img src="image/middle_09.jpg"><span>【11.11可用券】CELINE...<br>￥15182</span></a></p>
                            <p><a href="#"><img src="image/middle_07.jpg"><span>Apple iphone XR(A210...<br>￥6499</span></a></p>
                            <p><a href="#"><img src="image/middle_05.jpg"><span>【包税】CARTIER/卡地...<br>￥10461</span></a></p>
                            <p><a href="#"><img src="image/middle_03.jpg"><span>Coach蔻驰MINI CHARL...<br>￥999</span></a></p>
                        </li>
                        <li><p><a href="#"><img src="image/middle_07.jpg"><span>【11.11可用券】CELINE...<br>￥15182</span></a></p>
                            <p><a href="#"><img src="image/middle_03.jpg"><span>Apple iphone XR(A210...<br>￥6499</span></a></p>
                            <p><a href="#"><img src="image/middle_09.jpg"><span>【包税】CARTIER/卡地...<br>￥10461</span></a></p>
                            <p><a href="#"><img src="image/middle_05.jpg"><span>Coach蔻驰MINI CHARL...<br>￥999</span></a></p>
                        </li>
                        <li><p><a href="#"><img src="image/middle_09.jpg"><span>【11.11可用券】CELINE...<br>￥15182</span></a></p>
                            <p><a href="#"><img src="image/middle_03.jpg"><span>Apple iphone XR(A210...<br>￥6499</span></a></p>
                            <p><a href="#"><img src="image/middle_07.jpg"><span>【包税】CARTIER/卡地...<br>￥10461</span></a></p>
                            <p><a href="#"><img src="image/middle_05.jpg"><span>Coach蔻驰MINI CHARL...<br>￥999</span></a></p>
                        </li>
                        <li><p><a href="#"><img src="image/middle_05.jpg"><span>【11.11可用券】CELINE...<br>￥15182</span></a></p>
                            <p><a href="#"><img src="image/middle_03.jpg"><span>Apple iphone XR(A210...<br>￥6499</span></a></p>
                            <p><a href="#"><img src="image/middle_09.jpg"><span>【包税】CARTIER/卡地...<br>￥10461</span></a></p>
                            <p><a href="#"><img src="image/middle_07.jpg"><span>Coach蔻驰MINI CHARL...<br>￥999</span></a></p>
                        </li>
                        <li><p><a href="#"><img src="image/middle_03.jpg"><span>【11.11可用券】CELINE...<br>￥15182</span></a></p>
                            <p><a href="#"><img src="image/middle_05.jpg"><span>Apple iphone XR(A210...<br>￥6499</span></a></p>
                            <p><a href="#"><img src="image/middle_07.jpg"><span>【包税】CARTIER/卡地...<br>￥10461</span></a></p>
                            <p><a href="#"><img src="image/middle_09.jpg"><span>Coach蔻驰MINI CHARL...<br>￥999</span></a></p>
                        </li>
                    </ul>
                    <div id="btnss">
                        <div>&lt;</div>
                        <div>&gt;</div>
                    </div>
                    <ul id="numss">
                        <li class="hovers"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
            </div>
        </div>
 
    </div> 
    <div class="bottom">
            <div class="bottom_top">
                <ul>
                    
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                </ul>
                <ul>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                </ul>
                <ul>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                </ul>
                <ul>
                    <li><a href="#">诗库奢饰品养护</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                </ul>
        
               
            </div>
            <div class="bottom_bottom">
                <p><img src="image/ga.png"><a href="#">京公安备11010102001392</a></p>
                <p>京ICP证110119号&nbsp;京ICP备09084709号-3</p>
                <p><a href="#">IS09001中国质量管理体系认证</a></p>
                <p><a href="#">出版物经营许可证</a></p>
                <p><a href="#">食品经营许可证</a></p><br>
                <p>京B2-20181305</p>
                <p>京食药网食备201810026</p>
				<p>客服电话 : 400-875-6789</p>  
                <p>COPYRIGHT&COPY;2010-2017北京寺库商贸有限公司&nbsp;版却所有</p><br>
                <a href="#" class="low"><img src="image/1.jpg"></a>
                <a href="#" class="low"><img src="image/2.jpg"></a>
                <a href="#" class="low"><img src="image/3.jpg"></a>
                <a href="#" class="low"><img src="image/4.jpg"></a>
                <a href="#" class="low"><img src="image/5.jpg"></a>
            </div>
    </div>
</body>
</html>

<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="js/startMove.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    //表头
    var serve = document.querySelector(".serve");
    serve.onmouseover = function(){
        $id("serve_a").style.display = "block";
    }
    serve.onmouseout = function(){
        $id("serve_a").style.display = "none";
    }
    var oScrollBanner = document.getElementById("scrollBanner");
    var oScrollList = document.getElementById("scrollList");
    var aList  =oScrollList.children;
    var perWidth = aList[0].offsetWidth;
    oScrollList.style.width = perWidth * aList.length + "px";
    var i = 0;
    
    var timer = setInterval(function(){
        move();
    },3000);
    
    function move(){
        i++;
        
        if(i==aList.length){
            i = 0;
        }
        if(i==-1){
            i=aList.length - 1;
        }
        for(var k = 0; k < aList.length; k++){
            startMove(aList[k],{opacity:0});
        }
        startMove(aList[i],{opacity:100});
        //控制角标的变化
        for(var j = 0; j < aNumsList.length; j++){
            aNumsList[j].className = "";
        }			
            aNumsList[i].className = "hover";
    }
    
    //左右按钮实现图片切换
    var oBtns = document.getElementById("btns");
    var oPrev = oBtns.children[0];
    var oNext = oBtns.children[1];
    
    oNext.onclick = function(){
        move();
    }
    oPrev.onclick = function(){
        i-=2;
        move();
    }
    //移入移出清除定时器
    oScrollBanner.onmouseover = function(){
        clearInterval(timer);
        $id("btns").style.display = "block";
    }
    oScrollBanner.onmouseout = function(){
        $id("btns").style.display = "none";
        timer = setInterval(function(){
            move();
        },3000);
    }
    //角标移入变化
    var oNums = document.getElementById("nums");
    var aNumsList = oNums.children;
    
    for(let j = 0; j < aNumsList.length; j++){
        aNumsList[j].onmouseover = function(){
            i = j-1;
            move();
        }
    }


    //
    //下方轮播图
    var oScrollBanners = document.getElementById("scrollBanners");
    var oScrollLists = document.getElementById("scrollLists");
    var aLists  =oScrollLists.children;
    var perWidths = aLists[0].offsetWidth;
    oScrollLists.style.width = perWidths * aLists.length + "px";
    var m = 0;
    //启动定时器
    var timers = setInterval(function(){
        moves();
    },2000);
    //moves函数
    function moves(){
        m++;
        if(m==aLists.length){
            oScrollLists.style.left = 0;
            m = 1;
        }
        if(m==-1){
            oScrollLists.style.left = -perWidths * (aLists.length-1) + "px";
            m = aLists.length - 2;
        }
        
        //控制角标的变化
        for(var j = 0; j < aNumsLists.length; j++){
            aNumsLists[j].className = "";
        }
        if(m==aLists.length - 1){
            aNumsLists[0].className = "hovers";
        }else{
            aNumsLists[m].className = "hovers";
        }
        
        startMove(oScrollLists,{left:-perWidths*m});
    }
    
    //左右按钮实现图片切换
    var oBtnss = document.getElementById("btnss");
    var oPrevs = oBtnss.children[0];
    var oNexts = oBtnss.children[1];
    
    oNexts.onclick = function(){
        moves();
    }
    oPrevs.onclick = function(){
        m-=2;
        moves();
    }
    
    oScrollBanners.onmouseover = function(){
        clearInterval(timers);
        btnss.style.display = "block";
    }
    oScrollBanners.onmouseout = function(){
        btnss.style.display = "none";
        timers = setInterval(function(){
            moves();
        },2000);
    }
    //角标变化
    var oNumss = document.getElementById("numss");
    var aNumsLists = oNumss.children;
    
    for(let j = 0; j < aNumsLists.length; j++){
        aNumsLists[j].onmouseover = function(){
            m = j-1;
            moves();
        }
    }
</script>